<template>
  <div class="like">
    <div class="L_text">
      <!-- <span @click='btn'>文字</span> -->
      <!-- <span @click='btn'>内容</span> -->
      <!-- <router-link  :to="btn">文字</router-link> -->
      <router-link to="/text"
        ><span
          class="spn1"
          :class="{ sColor1: isShow, sColor2: !isShow }"
          @click="btnColor"
          >文字</span
        ></router-link
      >
      <router-link to="/content"
        ><span
          :class="{ sColor1: isShow2, sColor2: !isShow2 }"
          class="spn2"
          @click="btnColor"
          >内容</span
        ></router-link
      >
    </div>
    <!-- 三级路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      isShow2: false,
    };
  },
  methods: {
    btnColor() {
      this.isShow = !this.isShow;
      this.isShow2 = !this.isShow2
    },
  },
};
</script>

<style>
.L_text {
  display: flex;
  justify-content: space-around;
}
.spn1,.spn2{
  display: inline-block;
  width: 120px;
  height: 30px;
  background: #FF7D36;
  border-radius: 20px;
  text-align: center;
  line-height: 30px;
  
}
.sColor1 {
  color: white;
  font-size: 16px;
  font-weight: bold;
}
.sColor2 {
  color: black;
}
</style>